<template>
  <div class="form-item-inline">
    <div class="icon i-mdi-minus" @click="handleClickSub"></div>
    <input class="grow text-center" type="number" v-model.number="model" @blur="handleBlurValueFix">
    <div class="icon i-mdi-add" @click="handleClickAdd"></div>
  </div>
</template>

<script setup lang='ts'>

interface IProps {
  min?: number,
  minWarning?: string,
  max?: number,
  maxWarning?: string,
  step?: number
}

const props = withDefaults(defineProps<IProps>(), {
  min: 0,
  minWarning: '不能减少',
  max: 100,
  maxWarning: '不能增加',
  step: 1,
})

const model = defineModel<number>()

const handleClickAdd = () => {
  if (model.value === undefined) return
  if (model.value < props.max) {
    model.value = model.value + props.step
  }
  else
    if (props.maxWarning?.length)
      uni.showToast({
        title: props.maxWarning,
        icon: 'none',
      })
}
const handleClickSub = () => {
  if (model.value === undefined) return
  if (model.value > props.min)
    model.value = model.value - props.step
  else
    if (props.minWarning?.length)
      uni.showToast({
        title: props.minWarning,
        icon: 'none',
      })
}

const handleBlurValueFix = () => {
  if (model.value === undefined) model.value = props.min
  else if (model.value < props.min) model.value = props.min
  else if (model.value > props.max) model.value = props.max
}

</script>

<style></style>